<!--
 * @Author: Meow
 * @Date: 2019-10-10 20:22:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2019-10-24 15:20:04
 * @Description: 标签管理
 -->
<template>
  <div class="container">
    <div class="table-top">
      <span class="label">名称:</span>
      <el-input v-model="searchVal"></el-input>
      <el-button type="primary"
                 @click="search">搜索</el-button>
      <el-button type="primary"
                 @click="addDialog">添加</el-button>
      <!-- <el-button type="primary" @click="del">删除</el-button> -->
    </div>
    <!-- 添加 -->
    <el-dialog title="修改流程节点"
               :visible.sync="showDialog"
               width="50%"
               append-to-body>
      <!-- <Form :form="form" /> -->
      <!-- <el-button type="primary">提交</el-button> -->
      <el-form ref="form"
               :model="formData"
               label-position="left"
               label-width="120px">
        <el-form-item label="所属父级标签：">
          <el-select v-model="formData.parentId"
                     placeholder="请选择">
            <el-option v-for="item in findLabelList"
                       :key="item.catalogId"
                       :label="item.catalogName"
                       :value="item.catalogId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名字：">
          <el-input v-model="formData.labelName"></el-input>
        </el-form-item>
        <el-form-item label="标签类型：">
          <el-input v-model="formData.labelType"></el-input>
        </el-form-item>
        <el-form-item label="是否启用：">
          <el-checkbox v-model="formData.isValid"></el-checkbox>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="formData.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-dialog title="12" :visible.sync="aaaa" width="30%" append-to-body>123</el-dialog> -->
    <el-table :data="tableData.list"
              border
              style="width: 100%"
              :header-cell-style="{background:'#eef1f6',color:'#606266',fontWeight:'700'}">
      <el-table-column prop="labelId"
                       label="标签id"
                       align="center"></el-table-column>
      <el-table-column prop="labelName"
                       label="标签名称"
                       align="center"></el-table-column>
      <el-table-column prop="labelType"
                       label="标签类型"
                       align="center"></el-table-column>
      <el-table-column prop="description"
                       label="备注"
                       align="center"></el-table-column>
      <el-table-column prop="createTime"
                       label="创建时间"
                       align="center"></el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="primary"
                     @click="handleEdit(scope.$index,scope.row)">修改</el-button>
          <el-button size="mini"
                     type="primary"
                     @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     background
                     :page-size="tableConfig.pageSize"
                     :total="tableConfig.total"
                     :page-count="10"
                     :page-sizes="[5, 10, 20, 40]"
                     :current-page="tableConfig.pageNum"
                     @current-change="changePage"
                     @size-change="sizeChange"></el-pagination>
    </div><!-- 点击修改表格数据  弹窗 -->
    <el-dialog title="修改表格数据"
               :visible.sync="formEditShow"
               width="60%">
      <el-form :model="formEditData"
               label-position="right"
               label-width="120px">
        <el-form-item label="序号："
                      prop="labelId">
          <el-input v-model="formEditData.labelId"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="所属父级标签："
                      prop="parentId">
          <el-select v-model="formEditData.parentId"
                     placeholder="请选择">
            <el-option v-for="item in findLabelList"
                       :key="item.catalogId"
                       :label="item.catalogName"
                       :value="item.catalogId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称："
                      prop="labelName">
          <el-input v-model="formEditData.labelName"></el-input>
        </el-form-item>
        <el-form-item label="标签类型："
                      prop="labelType">
          <el-input v-model="formEditData.labelType"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="formEditData.description">
          </el-input>
        </el-form-item>
        <el-form-item>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="formEditShow = false;">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from "./components/Table";
import moreUseApi from "@/httpUtils/MoreUse/moreUse";
export default {
  name: "LabelManagement",
  components: {
    Table
    // homeView
  },
  filters: {},
  watch: {},
  data () {
    return {
      tableConfig: {
        total: 0,
        pageNum: 1,
        pageSize: 5,
        labelName: ""
      },
      loading: false,
      searchVal: "", // 搜索值
      showDialog: false, // 显示添加弹出层
      tableData: [], // 表格数据
      // 添加表单数据
      formData: {
        parentId: "", // 所属父级标签
        labelName: "", // 标签名字
        labelType: "", // 标签类型
        isValid: "", // 是否启用
        description: "" // 备注
      },
      findLabelList: [], // 父标签列表
      formEditShow: false,
      formEditData: {}
    };
  },
  created () { },
  watch: {
    tableConfig: {
      handler () {
        this.GetTableData(this.searchVal);
      },
      deep: true
    }
  },
  mounted () {
    this.GetTableData();
    this.GetfindLabelList(); // 获取父级标签列表
  },
  methods: {
    // 获取标签信息表
    GetTableData (searchVal) {
      this.tableConfig.labelName = searchVal || "";
      moreUseApi.queryLabelInfo(this.tableConfig).then(res => {
        this.tableData = res.data.data;
        this.tableConfig.total = res.data.data.total;
      });
    },
    // 显示添加弹出层
    addDialog () {
      this.showDialog = true;
      this.GetfindLabelList(); // 获取父级标签列表
    },
    // 添加
    add () {
      console.log(this.formData);
      moreUseApi.addLabel(this.formData).then(res => {
        console.log(" res--------------", res.data);
        // this.tableData = res.data.data;
        this.$message({
          message: res.data.message,
          type: res.data.success ? "success" : "waring"
        });
        this.showDialog = false;
        if (res.data.code == 200) {
          this.GetTableData();
        }
      });
    },
    // 获取父级标签列表
    GetfindLabelList () {
      moreUseApi.findLabelList().then(res => {
        console.log(" 父级标签列表--------------", res.data.data);
        res.data.data.unshift({
          catalogId: "0",
          catalogName: "无"
        });
        this.findLabelList = res.data.data;

        // this.tableData = res.data.data;
        // this.$message({
        //   message: res.data.message,
        //   type: res.data.success ? "success" : "waring"
        // });
        if (res.data.code == 200) {
        }
      });
    },
    // 搜索
    search () {
      this.GetTableData(this.searchVal);
    },
    //  搜索框输入
    remoteMethod (query) {
      console.log(query);
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    //  搜索框选中
    selectValue (value) {
      console.log(value);
      this.value = value;
    },
    /**
     * @desc 改变每页条数
     * @param {number} size 条数
     */
    sizeChange (size) {
      this.tableConfig.pageSize = size;
    },
    /**
     * @desc 改变当前页
     * @param {number} page 页数
     */
    changePage (page) {
      this.tableConfig.pageNum = page;
    },
    /**
     * 表格数据修改
     */
    handleEdit (index, row) {
      console.log(index, row)
      this.formEditShow = true

      this.formEditData = Object.assign({}, row)
      if (this.formEditData.parentId === null) {
        this.formEditData.parentId = "0"
      }
      this.formEditData.laberId = this.formEditData.labelId
    },
    //  表格数据修改 -- 点击确定
    onSubmitForm () {
      console.log(this.formEditData)
      moreUseApi.updateLabelById(this.formEditData).then(res => {
        if (res.data.code === 200) {
          this.$message.success('修改成功')
          this.formEditShow = false
          this.GetTableData()
        } else {
          this.$message.error('服务器内部错误')
        }
      })
    },
    /**
     * 表格数据删除
     */
    handleDelete (index, row) {
      this.$confirm("此操作将永久删除该标签, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          moreUseApi.deleteLabelById({ labelId: row.labelId }).then(res => {
            if (res.data.code === 200) {
              this.$message.success("删除成功");
              this.GetTableData(this.searchVal);
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

    }
  },

  destroyed () { }
};
</script>

<style scoped lang="less">
.table-top {
  .flex();
  .label {
    text-align: right;
    font-size: 14px;
    min-width: 80px;
    margin-right: 20px;
  }
  .el-input {
    max-width: 300px;
    margin-right: 20px;
  }
}
.homeLogic {
  width: 100%;
  height: 100%;
}

.bottom {
  .flex();
  justify-content: flex-end;
}
</style>
